import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Input, Modal } from 'antd';
import sm3 from '../utils/sm3-babel';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
  },
};

@Form.create()
@connect(({ global = {}, loading }) => ({
  user: global.currentUser,
  loading: loading.effects['global/updatePassword'],
}))
class UpdatePassword extends Component {
  state = {
    confirmDirty: false,
  };

  handleCancel = () => {
    const {
      form: { resetFields },
      handleVisible,
    } = this.props;
    resetFields();
    handleVisible();
  };

  handleSubmit = e => {
    e.preventDefault();
    const {
      form: { validateFields },
      dispatch,
      user: { id },
    } = this.props;
    validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'global/updatePassword',
          payload: { password: values.newPassword, userId: id },
        });
      }
    });
  };

  checkOldPwd = (rule, value, callback) => {
    if (value) {
      const {
        user: { password },
      } = this.props;
      const smValue = sm3(value).toUpperCase();
      // if (value && smValue !== password) {
      //   callback('旧密码不正确!');
      // }
    }
    callback();
  };

  checkConfirm = (rule, value, callback) => {
    const { confirmDirty } = this.state;
    const { form } = this.props;
    if (value && confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };

  checkPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value !== form.getFieldValue('newPassword')) {
      callback('两次输入密码不一致!');
    } else {
      callback();
    }
  };

  handleConfirmBlur = e => {
    const { confirmDirty } = this.state;
    this.setState({ confirmDirty: confirmDirty || !!e.target.value });
  };

  render() {
    const { loading, modalVisible } = this.props;
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <Modal
        title="修改密码"
        visible={modalVisible}
        okText="提交"
        onOk={this.handleSubmit}
        onCancel={this.handleCancel}
        confirmLoading={loading}
        destroyOnClose
      >
        <Form>
          <Form.Item {...formItemLayout} label="旧密码">
            {getFieldDecorator('password', {
              rules: [
                { required: true, message: '请填写旧密码!' },
                { validator: this.checkOldPwd },
              ],
            })(<Input type="password" />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="新密码">
            {getFieldDecorator('newPassword', {
              rules: [
                { required: true, message: '请填写新密码!' },
                { validator: this.checkConfirm },
              ],
            })(<Input type="password" />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="确认新密码">
            {getFieldDecorator('confirm', {
              rules: [
                { required: true, message: '请确认新密码!' },
                { validator: this.checkPassword },
              ],
            })(<Input type="password" onBlur={this.handleConfirmBlur} />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default UpdatePassword;
